//导入
import React, { Component } from 'react';
import { Route, NavLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import { NavConfiger, Navigator } from '../../navigator/Navigator';


import "./Page2.css";
import { Page3 } from './Page3';

//组件
class Page2 extends Component {


    static contextTypes = {
        pushNavConfig: PropTypes.func,
        popNavConfig: PropTypes.func,
    };

    configID;

    myNavConfig = {
        left: "页面1",
        center: "页面2",
        navClass: "page2_nav"
    };

    defaultNavConfig = {
        left: "上一页",
        center: "内层导航",
        right: <NavLink to={`${this.props.match.url}/page3`} >下一页</NavLink>,
        navClass: "nav_area_default"
    };

    componentWillMount() {
        this.configID = this.context.pushNavConfig(this.myNavConfig);
    }

    componentWillUnmount() {
        this.context.popNavConfig(this.configID);
    }

    render() {
        return (
            <NavConfiger>
                <fieldset className="page2" >
                    <legend>页面2</legend>
                    <Navigator navConfig={this.defaultNavConfig} />
                    <div className="content_box" >
                        <p>我是内层导航的内容</p>
                        <Route path={`${this.props.match.path}/page3`} component={Page3} />
                    </div>
                </fieldset>
            </NavConfiger>
        );
    }
}



export { Page2 };